<template>
  <div id="HeadTop">
    <el-container>
      <el-header>
        <el-row>
          <el-col>
            <div id="headerleft">
              <div>
                <img src="@/assets/img/logo.png" alt="logo">
                <span class="name">
                  美食食谱后台管理系统
                  </span>
              </div>
            </div>
          </el-col>
          <el-col
          >
            <div class="headRight">
              <span><i class="el-icon-message-solid"></i></span>
              <div class="block">
                <el-avatar :size="50"  :src="headImg"></el-avatar>
              </div>
              <span  id="showLoginout">
                <i class="el-icon-caret-bottom"></i>
              <ul  class="loginout">
                <li @click="loginout">退出登录</li>
                 <li><a href="/#/home">返回首页</a> </li>
              </ul>
              </span>
              </div
            >
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
          >
            <el-menu-item index="1" style="padding-left:20px">
              <!--              <span slot="title">-->
              <router-link  class="roua" :to="{name:'BackgroundHomePage'}" active-class="active">
                <i class="el-icon-s-home"></i>
                首页
              </router-link>
              <!--              </span>-->
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-marketing"></i>
                <span>交易中心</span>
              </template>
              <el-menu-item-group>
                <template slot="title">
                  <el-menu-item index="1-1">
                    <router-link  class="roua" :to="{name:'HundredDay'}" active-class="active">商品概况</router-link>
                  </el-menu-item>
                  <el-menu-item index="1-2">
                    <router-link  class="roua" :to="{name:'OrderStatistics'}" active-class="active">订单统计</router-link>
                  </el-menu-item>
                </template>
              </el-menu-item-group>
            </el-submenu>
            <router-link :to="{name:'RecipesList'}" active-class="active">
              <el-menu-item index="3">
                <i class="el-icon-document-remove"></i>
                <span slot="title">食谱管理</span>
              </el-menu-item>
            </router-link>
            <router-link :to="{name:'MenuList'}" active-class="active">
              <el-menu-item index="4">
                <i class="el-icon-document"></i>
                <span slot="title">菜单管理</span>
              </el-menu-item>
            </router-link>
            <el-menu-item index="5">
              <router-link  class="roua toGoods" to="/HeadTop/GoodsSituation/GoodsSummary">
                <i class="el-icon-s-goods"></i>
                商品管理
              </router-link>
            </el-menu-item>
            <el-menu-item index="6">
              <router-link class="roua" :to="{name:'UserManagement'}" active-class="active">
                <i class="el-icon-s-custom"></i>
                用户管理
              </router-link>
            </el-menu-item>
            <el-menu-item index="7">
              <router-link class="roua" :to="{name:'OrderManagement'}" active-class="active">
                <i class="el-icon-tickets"></i>
                订单管理
              </router-link>
            </el-menu-item>
            <el-menu-item index="8">
              <router-link class="roua" :to="{name:'SystemBackground'}" active-class="active">
                <i class="el-icon-setting"></i>
                系统管理
              </router-link>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'HeadTop',
  data () {
    return {
      headImg: ''
    }
  },

  created () {
    this.getuserinfo()
  },
  methods: {
    ChangeColor (event) {
      event.target.style.background = '#FFF4E7'
    },
    // 获取用户信息
    getuserinfo () {
      this.$axios({
        method: 'get',
        url: '/Menu/User/getUserInfo'
      }).then(data => {
        this.headImg = data.data.object.headImg
      })
    },
    loginout () {
      this.$store.dispatch('removeToken', null)
      this.$message.success('退出成功')
      this.$router.push({
        name: 'Login'
      })
    }
  }
}
</script>
<style>
.roua{
  display: block;
  width: 100%;
  height: 100%;
}
.el-menu-item-group__title {
  padding: 0 !important;
}
</style>
<style lang="less" scoped>
.active {
  color: #ffa433;
  i{
    color: #ffa433;
  }
}

a {
  text-decoration: none;
  color: black;
}

.toGoods {
  text-decoration: none;
  color: #333;
}

//.el-submenu__title{
//  padding: 0px;
//}
.el-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px;

  .el-button {
    //color: #ffa433;
    font-size: 20px;
    width: 38px;
    padding: 10px;
  }

  @media screen and (max-width: 600px) {
    .headRight {
      display: none;
    }

    .search {
      display: none;
    }

    .name {
      margin-left: -66px;
    }
  }

  #headerleft {
    align-items: center;
    img{
      height: 30px;
      width: 30px;
      margin: 15px 10px;
    }
    display: flex;
    div {
      background-color: #ff9512;
      font-size: 14px;
      // padding-left: 68px;
      padding-right: 10px;
      height: 60px;
      line-height: 60px;
      margin-right: 22px;
      span{
        float: right;
        color:#fff;
        font-weight: bold;
      }
    }
  }
}

.el-aside {
  background-color: #FFFFFF;
}

.el-main {
  background-color: cadetblue;
}

.el-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  span i {
    color: #575757;
    border-color: gray;
    font-size: 20px;
    margin-right: 50px;
  }
}

.headRight {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.block {
  margin-right: 20px;
}

.el-main {
  padding: 0px;
  background-color: #FFF4E7;
}

.el-menu {
  border-right: 0px;
}

.el-input {
  font-size: 14px;
}
#showLoginout{
  &:hover .loginout{
     display: block;
  }
}
.loginout{
  display: none;
  margin-left: -21px;
    width: 84px;
    height: auto;
    background: #fff;
    font-size: 13px;
    padding: 16px 6px;
    position: absolute;
    z-index: 100;
    margin-top: 0px;
    border-radius: 6px;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
    cursor: pointer;
    cursor: pointer;
  li{
   padding:8px 10px;
    color: #000;
    border-radius: 4px;
     &:hover {
      background: #ffa433;
      color: #fff;
}
  }
}
</style>
